<template>
  <div class="athome">
    <!-- 标题头 -->
    <van-nav-bar
      title="在家购药 想200减..."
      left-arrow
      @click-left="onClickLeft"
      class="title"
      ><template #right>
        <van-cell @click="showShare = true">
          <template #title>
            <img
              src="https://z3.ax1x.com/2021/07/17/Wl25ZR.png"
              alt=""
              class="img"
            />
          </template>
        </van-cell>
        <van-share-sheet
          v-model:show="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </template>
    </van-nav-bar>
    <div class="innerfixed">
      <div class="infixed">
        <!-- 轮播图 -->
        <div class="banner">
          <img src="https://z3.ax1x.com/2021/07/17/WlddWn.png" alt="" />
        </div>
        <div class="nav">
          <!-- 优惠券 -->
          <div class="coupon">
            <div class="incoupn">
              <p>商城券</p>
              <p><span>￥</span>5</p>
              <p>满200元可用</p>
              <p>2021.06.01-2021.06.30</p>
              <div class="btn" @click="getcoupon" v-if="state.num === 1">
                立即领取
              </div>
              <div class="btn1" v-if="state.num === 2">已领取</div>
            </div>
            <div class="incoupn">
              <p>商城券</p>
              <p><span>￥</span>5</p>
              <p>满200元可用</p>
              <p>2021.06.01-2021.06.30</p>
              <div class="btn" @click="getcoupon1" v-if="state.num1 === 1">
                立即领取
              </div>
              <div class="btn1" v-if="state.num1 === 2">已领取</div>
            </div>
          </div>
          <p class="state">
            -该券仅限中药处方使用，领取后在处方付款页面直接抵扣-
          </p>
          <!-- navbar -->
          <div class="navitem">
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/17/Wlx7DA.png"
                alt=""
                @click="fn"
              />
              <p>感冒发烧</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1Pv80.png"
                alt=""
                @click="fn"
              />
              <p>皮炎湿疹</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1Px2V.png"
                alt=""
                @click="fn"
              />
              <p>消化不良</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1iyR0.png"
                alt=""
                @click="fn"
              />
              <p>阳痿早泄</p>
            </div>
            <div class="pwrap five">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1iqsO.png"
                alt=""
                @click="fn"
              />
              <p>阴道炎</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1FaSx.png"
                alt=""
                @click="fn"
              />
              <p>糖尿病</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1FgfI.png"
                alt=""
                @click="fn"
              />
              <p>高血压</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1Ff6f.png"
                alt=""
                @click="fn"
              />
              <p>月经不调</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1Fo7Q.png"
                alt=""
                @click="fn"
              />
              <p>化痰止咳</p>
            </div>
            <div class="pwrap five">
              <img
                src="https://z3.ax1x.com/2021/07/17/W1FXcV.png"
                alt=""
                @click="fn"
              />
              <p>气血两虚</p>
            </div>
          </div>
          <!-- 医生在线 -->
          <div class="doctor">
            <div @click="handleclick1">
              <h4>医生在线</h4>
              <p>0元咨询开药></p>
            </div>
            <div @click="handleclick1">
              <h4>全职医生在线</h4>
              <p>24h紧急咨询></p>
            </div>
          </div>
          <!-- 限时抢购 -->
          <div class="imgpic">
            <div @click="handleClick">
              <h4>限时抢购<span>爆款好药</span></h4>
            </div>
            <div @click="handleClick">
              <h4>名医推荐<span>好药放心购</span></h4>
            </div>
          </div>
        </div>
        <!-- 底部navbar -->
        <div class="navbar">
          <div
            :class="{ active: state.activenum === index }"
            @click="handleclick(index)"
            v-for="(item, index) in state.list"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <!-- 底部图片列表 -->
        <div class="medlist">
          <ul>
            <li
              v-for="item in athomelist"
              :key="item._id"
              @click="gotolist(item._id)"
            >
              <div class="imgwrap">
                <img :src="item.imgurl" alt="" />
              </div>
              <div class="text">
                <p>{{ item.title }}</p>
                <div>
                  <em>￥</em><strong>{{ filter(item.newprice) }}</strong
                  ><span>{{ item.oldprice }}</span>
                  <div>购买</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部固定的定位 -->
    <div class="footer-wrap">
      <div class="footer">
        <p>全国知名合作药企<span>大三甲医院供货商</span></p>
        <div class="imglist">
          <div>
            <img
              src="https://z3.ax1x.com/2021/07/17/WlrG5D.png"
              alt=""
              class="img"
            />
          </div>
          <div>
            <img
              src="https://z3.ax1x.com/2021/07/17/Wlrwrt.png"
              alt=""
              class="img"
            />
          </div>
          <div>
            <img
              src="https://z3.ax1x.com/2021/07/17/Wlrra8.png"
              alt=""
              class="img"
            />
          </div>
          <div>
            <img
              src="https://z3.ax1x.com/2021/07/17/Wlr2xs.png"
              alt=""
              class="img"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, computed, watch, nextTick, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import BetterScroll from "better-scroll";
import { Toast } from "vant";
export default {
  setup() {
    //底部商品数据
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      activenum: 0,
      list: ["男科用药", "妇科用药", "消化用药", "皮肤用药"],
      athomelisttwo: computed(() => store.state.athomelisttwo),
      num: 1,
      num1: 1,
    });
    const athomelist = computed(() => store.state.athomelist);
    watch(athomelist, async () => {
      await nextTick();
      new BetterScroll(".innerfixed", {
        scrollX: false,
        scrollY: true,
        click: true,
      });
    });
    const fn = () => {
      Toast("功能还不支持");
    };
    //navbar点击事件
    const handleclick = (index) => {
      state.activenum = index;
      if (index !== 0) {
        Toast("功能还未提供");
      }
    };
    //标题左箭头
    const onClickLeft = () => {
      router.push("/home/index");
    };
    //价格选项
    const filter = (value) => {
      return value.slice(1);
    };
    //获取优惠券
    const getcoupon = () => {
      state.num = 2;
    };
    const getcoupon1 = () => {
      state.num1 = 2;
    };
    //获取数据
    const gotolist = (id) => {
      router.push("/detail/" + id);
    };
    onMounted(() => {
      getathomelist();
    });
    const getathomelist = () => {
      store.dispatch("changeathomeApi");
    };
    const handleclick1 = () => {
      // Toast("跳转至专家义诊页面");
      router.push("/zhuanjia");
    };
    const handleClick = () => {
      router.push("/detail/60f4c9642a13f5d641050c9a");
    };
    //分享面板
    const showShare = ref(false);
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "微博", icon: "weibo" },
      { name: "复制链接", icon: "link" },
      { name: "分享海报", icon: "poster" },
      { name: "二维码", icon: "qrcode" },
    ];

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };
    return {
      athomelist,
      state,
      gotolist,
      handleclick,
      getcoupon,
      filter,
      onClickLeft,
      getcoupon1,
      fn,
      options,
      onSelect,
      showShare,
      handleclick1,
      handleClick,
    };
  },
};
</script>

<style lang="less">
.athome {
  font-size: 16px;
  background: #fff;
  //标题
  .title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .van-nav-bar__title {
      color: #000000;
      font-weight: 400 !important;
    }
    .van-icon-arrow-left {
      width: 10px !important;
      height: 17px !important;
      font-weight: bold;
      color: #000;
      font-size: 16px;
    }
    .van-nav-bar__right {
      padding-right: 4px;
      .van-cell {
        margin-top: 8px;
        background: transparent;
      }
      .img {
        width: 22px;
        height: 22px;
      }
    }
  }
  .innerfixed {
    position: fixed;
    top: 46px;
    bottom: 138px;
    left: 0;
    right: 0;
  }
  //轮播图
  .banner {
    height: 145px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  //导航栏
  .nav {
    padding: 6px 10px;
    //优惠券
    .coupon {
      display: flex;
      justify-content: center;
      align-items: center;
      .incoupn {
        display: flex;
        flex-direction: column;
        width: 175px;
        height: 137px;
        margin: 0 3.5px;
        background: url("https://z3.ax1x.com/2021/07/17/WldrLT.png");
        background-size: 100% 100%;
        color: white;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        position: relative;
        p {
          &:first-of-type {
            position: absolute;
            top: 1px;
            left: 1.5px;
          }
          &:nth-of-type(2) {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fefefe;
            line-height: 24px;
            span {
              font-size: 12px;
            }
          }
          &:nth-of-type(3) {
            font-size: 12px;
            line-height: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fefefe;
          }
          &:nth-of-type(4) {
            font-size: 12px;
            line-height: 18px;
            font-family: PingFang SC;
            // font-weight: bold;
            color: #fefefe;
          }
        }
        .btn {
          width: 138px;
          height: 27.5px;
          background: #ffffff;
          border-radius: 28px;
          color: #3ca9ff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 20px;
        }
        .btn1 {
          width: 138px;
          height: 27.5px;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 28px;
          color: #3ca9ff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 20px;
        }
      }
    }
    //说明文字（小字）
    .state {
      font-size: 9px;
      height: 41px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ccc;
    }
    //navbar
    .van-grid {
      margin-bottom: 36px;
      .van-grid-item__content {
        width: 60px;
        height: 50px;
      }
    }
    //医生在线
    .doctor {
      display: flex;
      margin-bottom: 10px;
      div {
        margin: 0 6px;
        width: 166px;
        height: 83px;
        padding: 23px 0 0 9px;
        &:first-of-type {
          background: url("https://z3.ax1x.com/2021/07/17/WlD8pj.png");
          background-size: 100% 100%;
        }
        &:last-of-type {
          background: url("https://z3.ax1x.com/2021/07/17/WlDNn0.png");
          background-size: 100% 100%;
          p {
            color: #7668c1;
          }
        }
        h4 {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          line-height: 18px;
        }
        p {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #5e89cf;
          line-height: 18px;
        }
      }
    }
    //限时抢购
    .imgpic {
      display: flex;
      div {
        width: 165px;
        height: 126px;
        margin: 0 6px;
        padding: 16px 0 0 14px;
        &:first-of-type {
          background: url("https://z3.ax1x.com/2021/07/17/WlD0NF.png");
          background-size: 100% 100%;
        }
        &:last-of-type {
          background: url("https://z3.ax1x.com/2021/07/17/WlDs39.png");
          background-size: 100% 100%;
        }
        img {
          width: 100%;
          height: 100%;
        }
        h4 {
          font-size: 13.5px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          line-height: 18px;
          span {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-left: 5px;
            padding: 4px 8px;
            height: 17px;
            background: #e58d81;
            border-radius: 8.5px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            line-height: 18px;
          }
        }
      }
    }
    //navbar
    .navitem {
      display: flex;
      height: 197px;
      flex-wrap: wrap;
      .pwrap {
        width: 60px;
        height: 98px;
        font-size: 12px;
        margin-right: 13px;
        color: #666666;
        text-align: center;
        img {
          width: 60px;
          height: 50px;
          margin-bottom: 10px;
        }
      }
      .five {
        margin-right: 0;
      }
    }
  }
  //底部的navbar（男科用药）
  .navbar {
    display: flex;
    height: 44px;
    font-family: PingFang SC;
    div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    .active {
      background: #6e95b6;
      position: relative;
      color: #fff;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 35%;
        width: 29px;
        height: 2.5px;
        background: white;
      }
    }
  }
  //底部的列表图片
  .medlist {
    margin-bottom: 126px;
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 9px;
      li {
        margin-right: 6px;
        width: 175px;
        height: 281px;
        border: 1 solid #74727a;
        border-radius: 2.5px;
        display: flex;
        flex-direction: column;
        position: relative;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .imgwrap {
          border: 1px solid #ccc;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          position: absolute;
          left: 11px;
          top: 187px;
          p {
            width: 149px;
            height: 40px;
            font-size: 13.5px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            line-height: 20.5px;
            margin-bottom: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          div {
            display: flex;
            em {
              font-size: 12px;
              line-height: 22px;
              color: red;
            }
            strong {
              font-size: 18px;
              margin-right: 5px;
              color: red;
            }
            span {
              font-size: 12px;
              color: #ccc;
              line-height: 22px;
            }
            div {
              margin-left: 35px;
              width: 45px;
              height: 20px;
              border-radius: 10px;
              background: #f33648;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              color: white;
            }
          }
        }
      }
      .second {
        margin-right: 0;
      }
    }
  }
  //固定定位底部不动的
  .footer-wrap {
    width: 100%;
    background: white;
    position: fixed;
    bottom: 0;
    left: 0;
    .footer {
      margin: 0 14px 5px;
      height: 116px;
      width: 347px;
      background: #f9f9f9;
      border-radius: 10px;
      p {
        margin: 17px 0 24px 16px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        span {
          display: inline-flex;
          width: 110px;
          height: 17px;
          justify-content: center;
          align-items: center;
          border-radius: 8.5px;
          background: #81c9ff;
          margin-left: 8px;
          font-size: 10px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
      }
      .imglist {
        width: 347px;
        display: flex;
        height: calc(100%-47.5px);
        div {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 50px;
            height: 50px;
          }
        }
      }
    }
  }
}
</style>
